<!--
 * @Description: 代码预览组件
 * @Author: kcz
 * @Date: 2019-12-30 00:37:05
 * @LastEditors: kcz
 * @LastEditTime: 2021-05-27 15:18:39
 -->
 <template>
  <a-layout style="background: #fff; height: 580px">
    <a-layout-sider width="200" style="background: #fff">
      <a-card title="事件列表" size="small">
        <a-menu style="border-right: 0">
          <a-menu-item>数据加载完成</a-menu-item>
          <a-menu-item>数据改变</a-menu-item>
          <a-menu-item>提交数据前</a-menu-item>
          <a-menu-item>提交数据后</a-menu-item>
        </a-menu>
      </a-card>
    </a-layout-sider>
    <a-layout-content :style="{ padding: '0 2px', minHeight: '280px' }">
      <a-card title="事件脚本" size="small">
        <eip-code height="500px"></eip-code>
      </a-card>
    </a-layout-content>
  </a-layout>
</template>
  <script>
export default {
  name: "CodeModal",
  data() {
    return {
      visible: false,
      editorVueJson: "",
      editorHtmlJson: "",
      jsonData: {},
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.editorVueJson =
          codeVueFront + JSON.stringify(this.jsonData) + codeVueLast;

        this.editorHtmlJson =
          codeHtmlFront + JSON.stringify(this.jsonData) + codeHtmlLast;
      }
    },
  },
  components: {},
  methods: {
    handleCancel() {
      this.visible = false;
    },
  },
};
</script>
  